Skip to main content

Google Pay Integration

Accept payments from Google Pay users across Android devices and the web with fast, simple checkout and enhanced security features.

This guide walks you through adding Google Pay to an existing Connected Payments payment page. There are three stages:

  1. Configure Google Pay — set up your Google Pay settings in the dashboard
  2. Enable Google Pay — activate it on your payment page
  3. Add the button — insert the Google Pay button into your page config
Library version

This documentation pertains to version 3.0.10 of the @google-pay/button-react library. Check for updates in newer versions that may affect functionality or usage.

Step 1 — Configure Google Pay in the Dashboard​

Follow these steps to set up Google Pay in your Connected Payments dashboard:

  1. Log in to your Connected Payments account and navigate to the Customer Configs section.
  2. Select the config you want to enable Google Pay for and click Edit.
  3. Go to Configuration → 3rd Party Integrations tab and update the Google Pay settings as required (see configuration reference below).
  4. Click Save to apply the changes.
Production access

Before going live, you must request production access to the Google Pay API via the Google Pay & Wallet Console.

Google Pay Configuration Reference​

The following fields are available when configuring Google Pay:

FieldTypeExampleDescription
gatewayMerchantIdstring"test"The unique identifier for your payment gateway.
merchantIdstring"test"The unique identifier for the merchant, matching the ID used in the Google Pay API.
merchantNamestring"Example Merchant"A user-visible merchant name. If not set, the business name from your Google Pay Developer Profile is used.
currencyCodestring"AUD"ISO 4217 alphabetic currency code for the transaction.
validCardTypesstring[]["VISA", "MASTERCARD"]The card networks your gateway supports for card transactions.

Step 2 — Add the Google Pay Button to your page​

Once Google Pay is enabled, insert the following JSON object into your page config at the position where you want the button to appear:

{
  "googlePayTag": "googlePayButton",
  "class": "google-pay-button",
  "children": []
}

Compliance and Branding​

By using this service you acknowledge and accept the following Google Pay policies:

Before going live, make sure you have reviewed:

Branding requirements

Google Pay has strict branding guidelines that must be followed when displaying the Google Pay button. Failure to comply may result in loss of access to the Google Pay API.